<template>
  <div style="margin-bottom:50px;">
    <!-- 头部 -->
    <mt-header title="商品分类">
      <div slot="left">
        <mt-button @click="goBack" icon="back">返回</mt-button>
      </div>
    </mt-header>
    <!-- 商品分类 -->
    <div class="clear container">
      <ul class="pro_item" v-for="item in category" @click="jiazai">
        <li><p>{{item.title}}</p></li>
        <li><img :src="item.imgUrl"/></li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Indicator } from 'mint-ui';
  export default{
    data:function(){
      return {
       category:[]
      }
    },
    created(){
      this.getCategory();
    },
    methods:{
     goBack(){
       this.$router.go(-1);
     },
      jiazai(){
       Indicator.open('加载中...')
       setTimeout(()=>{
         Indicator.close();
         this.$router.push('/list')
       },300)
     },
     getCategory(){
       this.category=[
         {
           id:0,
           title:"家居家纺",
           imgUrl:require('../assets/img/jiaju.jpg')
         },
          {
           id:1,
           title:"3C数码",
           imgUrl:require('../assets/img/3c.jpg')
         },
          {
           id:2,
           title:"家用电器",
           imgUrl:require('../assets/img/dianqi.jpg')
         },
          {
           id:3,
           title:"厨房小电",
           imgUrl:require('../assets/img/chufang.jpg')
         },
          {
           id:4,
           title:"服饰",
           imgUrl:require('../assets/img/lingshi.jpg')
         },
          {
           id:5,
           title:"零食小吃",
           imgUrl:require('../assets/img/lingshi.jpg')
         }
       ]
     }
    }
  }
</script>

<style scoped>
.container{
  width: 100%;
}
.pro_item{
  float: left;
  width: 50%;
  border-right:1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
}
.pro_item p{
  font-size: 16px;
  color: #333333;
  padding-top:5px;
  padding-left: 5px;
  margin-top:8px;
  margin-bottom: 3px;
}
.pro_item>li:last-child{
  text-align: center;
}
.pro_item img{
  width: 70%;
}
</style>